<template>
    <div class="profile">
        <el-row :gutter="10">
            <el-col :sm="6">
                <el-card class="box-card">
                    <template #header>
                        <span>基础资料</span>
                    </template>
                    <ul class="list">
                        <li class="list-item">
                            <el-avatar shape="square" :size="35" :icon="UserFilled" />
                        </li>
                        <li class="list-item">
                            <p class="label">
                                <User class="icon"/>用户名
                            </p>
                            <p class="value">{{userStore.userInfo?.username}}</p>
                        </li>
                        <li class="list-item">
                            <p class="label">
                                <Message class="icon"/>邮箱
                            </p>
                            <p class="value">{{userStore.userInfo?.email}}</p>
                        </li>
                    </ul>
                </el-card>
            </el-col>
            <el-col :sm="10">
                <el-card class="box-card">
                    <template #header>
                        <span>修改资料</span>
                    </template>
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="基本资料" name="first">
                            <ProfileForm/>
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="second">
                            <PasswordForm/>
                        </el-tab-pane>
                        <el-tab-pane label="修改邮箱" name="third">Role</el-tab-pane>
                      </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { UserFilled, User } from '@element-plus/icons-vue'
import { useUserStore } from '@/store'
import { ref } from 'vue'
import ProfileForm from './ProfileForm.vue'
import PasswordForm from './PasswordForm.vue'

const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}
const userStore = useUserStore()

</script>

<style lang="scss">
.profile {
    .el-card {
        .card-header {
            display: flex;
            justify-content: space-between;
        }
    }
    .list {
        &-item {
            display: flex;
            justify-content: space-between;
            gap: 5px;
            padding: 15px 0;
            border-bottom: 1px solid #e7eaec;
            .label {
                display: flex;
                align-items:  center;
                white-space: nowrap;
                gap: 2px;
                color: #666;
                .icon {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
}
</style>